<template>
	<view class="content">
		<uni-nav-bar ref="test" :title="title" :style="{display: visible ? 'block' : 'none'}"></uni-nav-bar>
		<view class="layout-page" style="height: 80%;">
			<!-- 首页 -->
			<home :visible="active === 'home'" :tabbarHeight="tabbarHeight" :height="height" @change="handleTabChange">
			</home>
			<!-- 分类 -->
			<Category :visible="active === 'category'" ww:height="height" @change="handleTabChange">
			</Category>
			<!-- 购物车 -->
			<Cart :visible="active === 'cart'" :tabbarHeight="tabbarHeight"  :height="height" @change="handleTabChange">
			</Cart>
			<!-- 我的 -->
			<mine :visible="active === 'mine'" :height="height" @change="handleTabChange">
			</mine>

			<!-- 团长首页 -->
			<grand-home :visible="active === 'grandhome'" :height="height" @change="handleTabChange">
			</grand-home>
			<!-- 团长订单 -->
			<grand-order :visible="active === 'grandorder'" :height="height" @change="handleTabChange">
				
			</grand-order>
			<!-- 团长我的 -->
			<grand-mine :visible="active === 'grandmine'" :height="height" @change="handleTabChange">
			</grand-mine>
		</view>

		<lb-tabbar ref="tabbar" :value="active" :animate="animate" @change="handleChange">
			<lb-tabbar-item v-for="item in tablist" :key="item.name" :name="item.name"
				:icon="active === item.name ? item.iconActive : item.icon" :dot="item.dot" :info="item.info"
				:raisede="item.raisede" icon-prefix="iconfont" @click="handleTabbarItemClick">
				{{ item.text }}
			</lb-tabbar-item>
		</lb-tabbar>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import {
		getWxType
	} from "@/server/api.js"
	import Home from '@/pages/home/home'
	import Category from '@/pages/category/category'
	import Cart from '@/pages/cart/cart'
	import Mine from '@/pages/user/user'
	import GrandHome from '@/pages/headhome/headhome'
	import GrandOrder from '@/pages/headorder/headorder'
	import GrandMine from '@/pages/headme/headme'
	export default {
		components: {
			Home,
			Category,
			Cart,
			Mine,
			GrandHome,
			GrandOrder,
			GrandMine
		},
		data() {
			return {
				active: '',
				animate: 'zoomIn',
				height: '',
				title: "首页",
				visible: true,
				tabbarHeight: 0,
				tabbars: [{
						name: 'home',
						text: '首页',
						icon: "../../static/tab-home.png",
						iconActive: "../../static/tab-home-current.png",

					},
					{
						name: 'category',
						text: '分类',
						icon: "../../static/tab-cate.png",
						iconActive: "../../static/tab-cate-current.png",
					},

					{
						name: 'cart',
						text: '购物车',
						icon: "../../static/tab-cart.png",
						iconActive: "../../static/tab-cart-current.png",
					},
					{
						name: 'mine',
						text: '我的',
						icon: "../../static/tab-my.png",
						iconActive: "../../static/tab-my-current.png",
					}
				],
				tablist: [],
				tabbarsGrand: [{
						name: 'grandhome',
						text: '首页',
						icon: "../../static/tab-home.png",
						iconActive: "../../static/tab-home-current.png",
					},
					{
						name: 'grandorder',
						text: '订单',
						icon: "../../static/tab-my.png",
						iconActive: "../../static/tab-my-current.png",
					},
					{
						name: 'grandmine',
						text: '我的',
						icon: "../../static/tab-my.png",
						iconActive: "../../static/tab-my-current.png",
					}
				]
			}
		},
		computed: {
			...mapState(['hasLogin']),
		},
		onLoad(option) {
			uni.getLocation({
				success: (res) => {
					uni.setStorage({
						key: 'tude',
						data: encodeURIComponent(JSON.stringify(res)),
						success: function() {}
					});
				},
				fail(err) {
					console.log(err)
				}
			})

			this.active = option.tab || 'home'
			//判断是否登录
			// if (this.hasLogin) {
			// 	getWxType().then(data => {
			// 		//00是消费者    01是团长
			// 		if (data.userType == "00") {
			// 			this.active = 'home'
			// 			this.tablist = this.tabbars
			// 		} else if (data.userType == "01") {
			// 			this.active = 'grandhome'
			// 			this.tablist = this.tabbarsGrand
			// 		}
			// 		//需要后面删掉
			// 		this.active = 'home'
			// 		this.tablist = this.tabbars
			// 	})
			// } else {
			// 	this.active = 'home'
			// 	this.tablist = this.tabbars
			// }
			// this.active = 'home'
			// this.tablist = this.tabbars
			 	
		this.active = 'grandhome'
		this.tablist = this.tabbarsGrand
		},
		onReady() {
			const res = uni.getSystemInfoSync()
			const {
				windowHeight
			} = res
			this.tabbarHeight = this.$refs.tabbar.tabbarHeight
			console.log("&&&&&&&&&&&&&&")
			console.log(this.tabbarHeight)
			this.height = windowHeight - this.tabbarHeight + 'px'
		},
		created() {

			uni.$on("active", (data) => {
				if (data.dorm == "changeGrand") {
					this.active = 'grandhome'
					this.tablist = this.tabbarsGrand
				} else if (data.dorm == "changeConsumers") {
					this.active = 'home'
					this.tablist = this.tabbars
				} else {
					this.active = data.dorm
					console.log("获取到的数据")
					console.log(data)
				}
			})
		},
		methods: {
			handleChange(e) {
				this.active = e.name
				if (e.name == "home") {
					this.title = "首页"
					this.visible = true
				} else if (e.name == "category") {
					this.title = "分类"
					this.visible = true
				} else if (e.name == "cart") {
					this.title = "购物车"
					this.visible = true
				} else {
					this.visible = false
				}
			},
			handleTabChange(name) {
				console.log("------------99999"+name)
				this.active = name
			},
			handleTabbarItemClick(e) {

			}
		},
		watch: {
			active: {
				handler(newVal) {
					if (newVal) {
							console.log("-----------8888"+name)
						// pages.json中设置页面的title为空，可在此处动态设置标题及颜色等等
						const item = this.tabbars.find(item => item.name === this.active)
						uni.setNavigationBarTitle({
							title: item.text,

						})


					}
				},
				immediate: true
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {

		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		overflow: hidden;

		.layout-page {
			min-height: 0;
			flex: 1;

			/deep/ .page {}
		}
	}
</style>
